<template>
  <div>
    <header-box></header-box>
    <div class="tml-header">
      <ul class="th-list cf displayflex">
        <li class="flex1" @click="scanQrCode()">
          <div class="llse llse-scan"></div>
          <div class="txt">扫描签收</div>
        </li>
        <router-link to="/receiver/orderlist" tag="li" class="flex1">
          <div class="llse llse-shangpin"></div>
          <div class="txt">订单查询</div>
        </router-link>
        <!-- <router-link to="/receiver/orderlist" tag="li" class="flex1">
          <div class="icon-pre-order"></div>
          <div class="txt">下订单</div>
        </router-link>
        <router-link to="/receiver/orderlist" tag="li" class="flex1">
          <div class="llse llse-shangpin"></div>
          <div class="txt">物流查询</div>
        </router-link> -->
      </ul>
    </div>
    <div class="ll-contain">
      <div class="wait-orders">
        <span class="f-l">
          待签收订单
          <i>{{todolist.length}}</i>
        </span>
      </div>
      <template v-if="todolist.length>0">
        <scroller
          lock-x
          height="-314"
          @on-scroll-bottom="onScrollBottom"
          ref="scrollerBottom"
          :scroll-bottom-offst="100"
        >
          <div>
            <div class="list-wrap" v-for="item in todolist">
              <div class="list-header">
                <span class="f-l">
                  业务单号：
                  <i>{{item.BBillNo}}</i>
                </span>
                <em class="f-r orange">{{item.State | PoState}}</em>
              </div>
              <div class="list-content">
                <dl class="displayflex">
                  <dt>
                    <div>
                      <i class="llse llse-cargo"></i>
                      <p>{{item.ConPKGS || item.Pkgs}}件</p>
                    </div>
                  </dt>
                  <dd class="flex1">
                    <p>
                      <label>制单日期：</label>
                      <span>{{item.BillDate | GetDate}}</span>
                    </p>
                    <p>
                      <label>供应单位：</label>
                      <span>{{item.CargoOwnerName}}</span>
                    </p>
                    <p>
                      <label>送货联系人：</label>
                      <span>
                        <label>{{item.Driver1Name}} {{item.Driver1Tel}}</label>
                        <a :href="`tel:${item.Driver1Tel}`" class="iconfont icon-phone"></a>
                      </span>
                    </p>
                  </dd>
                </dl>
              </div>
              <div class="list-btn">
                <div class="btn" @click="GoToDetail(item.Guid)">详情</div>
                <!-- <div class="btn refuse" @click="popupVisible=true;Guid=item.Guid">拒签</div> -->
                <div class="btn" @click="GoToSign(item.Guid)">签收</div>
              </div>
            </div>
            <p class="txt-bottom" v-if="totalLength == todolist.length">
              <em class="txt">我是有底线的</em>
            </p>
          </div>
        </scroller>
      </template>
    </div>
    <!--拒单弹窗 start-->
    <popup v-model="popupVisible" position="bottom" :show-mask="true">
      <div class="reason-check">
        <Checklist
          title="拒签原因"
          label-position="left"
          :max="1"
          :options="commonList"
          v-model="checkedName"
          @on-change="selectNames"
        ></Checklist>
      </div>
      <div class="txtarea-other" v-if="moneshow">
        <textarea placeholder="请填写其它原因" rows="3" v-model="Memo" type="text"></textarea>
      </div>
      <div class="bottom-two-btn">
        <div class="new-btn" @click="refuseBill('N')">取消</div>
        <div class="new-btn" @click="refuseBill('Y')">确认</div>
      </div>
    </popup>
    <!--拒单弹窗 end-->

    <div class="noDate_page" v-if="todolist.length==0" style="padding-top: 1rem">
      <div class="noDate_icon">
        <i class="iconfont icon-null" style="font-size: 1rem; color:rgba(255,255,255,.65)"></i>
      </div>暂无数据！
    </div>
    <footer-menu :status="1"></footer-menu>
  </div>
</template>

<script>
import footerMenu from "@/commonComponent/footer.vue";
import { Checklist } from "vux";
export default {
  components: {
    footerMenu,
    Checklist
  },
  data() {
    return {
      todolist: [],
      totalLength: 0,
      popupVisible: false,
      commonList: ["有事无法接单", "商品数量不对", "商品破损", "其它"],
      checkedName: [],
      moneshow: false,
      Guid: ""
    };
  },
  computed: {
    userinfo() {
      return localStorage.userinfo ? JSON.parse(localStorage.userinfo) : null;
    }
  },
  created() {
    this.getData();
    this.getExcepReason();
    // this.afterQR('YW2019071100013')
  },
  methods: {
    getData() {
      let query = {
        PageIndex: 1,
        PageSize: 9999,
        SaleCorpGUID: this.userinfo.Name,
        SaleCorpName: this.userinfo.LogonUser,
       // TenantGuid: this.userinfo.TenantGuid,
        State: "56"
        //StateS: "53",
        // OrderBy: 1,
      };
      this.Ajax.post("SearchReceivingApi", query)
        .then(res => {
          if (res.IsSuccess) {
            this.todolist = res.Datas;
          } else {
            this.Toast(res.ErrorMessage);
          }
        })
        .catch(e => {
          this.Toast("出错了，请刷新重试");
        });
    },

    getExcepReason() {
      let query = {
        TypeValue: "Refusalreason"
      };
      this.Ajax.post("GetDatadictionaries", query)
        .then(res => {
          if (res.IsSuccess) {
            this.commonList = [];
            res.Datas.forEach(x => {
              this.commonList.push(x.DataIntroduction);
            });
          } else {
            this.Toast(res.ErrorMessage);
          }
        })
        .catch(e => {
          this.Toast("出错了，请刷新重试");
        });
    },

    GoToDetail(Guid) {
      this.$router.push({
        path: "/receiver/detail",
        query: {
          Guid: Guid
        }
      });
    },

    GoToSign(Guid) {
      this.$router.push({
        path: "/receiver/sign",
        query: {
          Guid: Guid
        }
      });
    },

    onScrollBottom() {},
    //原因其他选择
    selectNames() {
      if (this.checkedName[0] == "其它") {
        this.moneshow = true;
        this.Memo = "";
      } else {
        this.moneshow = false;
      }
    },

    scanQrCode() {
      let self = this;
      this.jWeixin.scanQRCode({
        needResult: 1,
        scanType: ["qrCode", "barCode"],
        success: function(res) {
          var result = res.resultStr,
            temp;
          if (result.indexOf(",") > -1) {
            temp = result.split(",")[0];
          } else {
            temp = result;
          }
          self.afterQR(temp);
        },
        error: function(res) {
          self.Toast({
            message: res.resultStr
          });
        }
      });
    },

    afterQR(BBillNo) {
      let query = {
        Qrcode: BBillNo,
        TenantGuid: this.userinfo.TenantGuid,
        SaleName: this.userinfo.Name,
        SaleTel: this.userinfo.LogonUser
      };
      this.Ajax.post("FastGetBillGuid", query)
        .then(res => {
          if (res.IsSuccess) {
            let State = parseInt(res.Data.State);
            if (State == 81) {
              this.Toast("订单已签收");
            } else if (State == 56 || State == 53) {
              this.GoToSign(res.Data.Guid);
            } else {
              this.Toast("订单未交货，不能签收");
            }
          } else {
            this.Toast(res.ErrorMessage);
          }
        })
        .catch(e => {
          this.Toast("出错了，请刷新重试");
        });
    },
    //拒签
    refuseBill(type) {
      var self = this;
      if (type == "N") {
        self.popupVisible = false;
      } else {
        if (self.checkedName == "其它") {
          self.checkedName.push(self.Memo);
        }
        if (self.checkedName == "") {
          this.Toast("请选择拒签原因！");
          return false;
        }

        let query = {
          GUID: self.Guid,
          Memo: self.checkedName[0],
          ExpReason: self.checkedName[0],
          Receiver: this.userinfo.StaffID,
          ReceiverName: this.userinfo.Name
        };
        this.Ajax.post("RefusalreasonConfirm", query)
          .then(res => {
            if (res.IsSuccess) {
              self.Toast("订单拒收成功！");
              self.popupVisible = false;
              self.getData();
            } else {
              self.checkedName = [];
              this.Toast(res.ErrorMessage);
            }
          })
          .catch(e => {
            this.Toast("出错了，请刷新重试");
          });

        // alert(self.checkedName);
      }
    }
  }
};
</script>